<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  <div class="mui-scroll">
		    <!--数据列表-->
		    <ul class="mui-table-view mui-table-view-chevron" id="box">
		      	<!--<li>1</li>
		      	<li>2</li>
		      	<li>3</li>
		      	<li>4</li>-->
		    </ul>
		  </div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			var down = 0;
			var	up = 0;
			var box = document.getElementById('box');
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
			      height:50,//可选,默认50.触发下拉刷新拖动距离,
			      auto: true,//可选,默认false.自动下拉刷新一次
			      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
			      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
			      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
			      callback :function(){
			      	setTimeout(function(){
			      		var li = document.createElement('li');
			      		li.innerHTML = "下拉刷新的数据====>"+ ++down;
			      		box.insertBefore(li,box.childNodes[0]);
			      		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			      	},500);
			      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    },
			    
			    up : {
			      height:50,//可选.默认50.触发上拉加载拖动距离
			      auto:false,//可选,默认false.自动上拉加载一次
			      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			      callback :function(){
			      	setTimeout(function(){
			      		var li = document.createElement('li');
			      		li.innerHTML = "上拉加载的数据====>"+ ++up;
			      		box.appendChild(li);
			      		mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
			      	},500);
			      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			    
			    
			    
			  }
			});
		</script>
	</body>

</html>